<template>
	<view class="classificationManagementPage">
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="classificationList flex-column-between">
					<view class=" flex-between">
						<view class="flex">
							<image class="img" :src="item.img" mode=""></image>
							<view class="flex-columns margin-left_16rpx font-weight_bold">
								{{item.name}}
								<text style="color: rgb(153, 153, 153);">ID：{{item.id}} </text>
							</view>
						</view>
						<switch style="transform:scale(0.7)" :checked="item.status==1?true:false"
							@change="e=>switch1Change(e,item)" />
					</view>
					<view class="flex-between">
						<view class="" style="color: rgb(153, 153, 153);">
							<text>
								创建时间：{{item.create_time}}
							</text>
						</view>
						<view class="flex">
							<view class="delete flex margin-right_16rpx" @click="deleteClassification(item)">
								删除
							</view>
							<view class="edit flex" @click="edit(item)">
								编辑
							</view>
						</view>
					</view>
				</view>

			</block>
		</mescroll-body>
		<view class="btnSure flex" @click="addClassification()">
			新增
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				


			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				},
				
			});
		},
		onShow() {
			this.mescroll?.resetUpScroll();
			
		},
		methods: {
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.classifyList,
					data: {


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			addClassification() {
				// if( this.list.length!=4){
				// 	this.$sun.navGo('/pages/classificationManagement/addClassification')
				// }else{
				// 	this.$sun.toast('最多增加4个分类请删除后在添加','none')
				// }
				this.$sun.navGo('/pages/classificationManagement/addClassification')
				
			},
			async switch1Change(e, item) {
				console.log(e, item)
				const result = await this.$http.post({
					url: this.$api.upClassify,
					data: {
						id: item.id,
						status: item.status == 1 ? 2 : 1

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					this.mescroll?.resetUpScroll();
					this.$sun.toast(result.msg, 'none')
				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			// 删除分类
			async deleteClassification(item) {
				uni.showModal({
					title: '提示',
					content: '是否删除' + item.name + '分类',
					success: async (res) => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.upClassify,
								data: {
									id: item.id,
									status: 0

								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							if (result.code == 0) {
								this.mescroll?.resetUpScroll();
								this.$sun.toast(result.msg, 'none')
							} else {
								this.$sun.toast(result.msg, 'none')
							}
						} else if (res.cancel) {

						}
					}
				});





			},
			edit(item){
				console.log(item)
				this.$sun.navGo('/pages/classificationManagement/addClassification',{...item})
			}
		}
	}
</script>

<style lang="less">
	.btnSure {
		width: 90%;
		height: 76rpx;
		background: rgb(81, 142, 247);
		color: rgb(255, 255, 255);
		border-radius: 108rpx;
		font-size: 32rpx;
		font-weight: 700;
		position: fixed;
		bottom: 20rpx;
	}

	.classificationManagementPage {
		padding: 34rpx;
		height: 198rpx;

		.classificationList {
			margin-top: 20rpx;

			.img {
				width: 84rpx;
				height: 84rpx;
			}

			padding: 20rpx;
			height: 198rpx;
			border-radius: 20rpx;

			background: rgb(255, 255, 255);

			.delete {
				border-radius: 12rpx;
				width: 100rpx;
				height: 52rpx;
				background: rgb(255, 0, 0);
				color: rgb(255, 255, 255);
				border-radius: 12rpx;
			}

			.edit {
				border-radius: 12rpx;
				width: 100rpx;
				height: 52rpx;
				background: rgb(255, 0, 0);

				color: rgb(255, 255, 255);
				background: rgb(89, 147, 249);
			}
		}
	}

	page {
		background: #f6f6f6;
	}
</style>